<template>
    <view class="wrap">
        <Navbar :title="title"></Navbar>
        <view class="searchbox">
            <u--input placeholder="请输入手机号" prefixIcon="search" shape="circle" prefixIconStyle="color: #ffffff;"
                placeholderClass="placeholderStyle" style="height: 72rpx;background: #636883;border-radius: 36rpx;
border: 2rpx solid #FFFFFF;;"></u--input>
        </view>
        <view class="content">
            <view class="select-box">
                <view class="choose-text">筛选分类</view>
                <view class="select-option" @click="showOption('firstshow')">
                    <view>{{ currentFirstSelect.KsbClassName ? currentFirstSelect.KsbClassName : '请选择一级' }}</view>
                    <u-icon name="arrow-down-fill" color="#64707D" size="10"></u-icon>
                </view>
                <view class="select-option" @click="showOption('secondshow')">
                    <view>{{ currentSecondSelect.KsbClassName || currentSecondSelect.CName || '请选择二级' }}</view>
                    <u-icon name="arrow-down-fill" color="#64707D" size="10"></u-icon>
                </view>
                <view class="select-option" @click="showOption('thirdshow')" v-if="isChild">
                    <view>{{ currentThirdSelect.CName ? currentThirdSelect.CName : '请选择三级' }}</view>
                    <u-icon name="arrow-down-fill" color="#64707D" size="10"></u-icon>
                </view>
                <view class="select-option disabled" v-else>
                    <view>暂无三级</view>
                    <u-icon name="arrow-down-fill" color="#64707D" size="10"></u-icon>
                </view>
            </view>
            <view class="meal_list">
                <view class="list_title">
                    <img class="list_icon" src="@/static/img/list_icon.png" alt="">
                    <text>套餐列表</text>
                </view>
                <u-empty mode="list" v-if="!renderList.length"></u-empty>
                <view class="list">
                    <view class="item_meal" v-for="item in renderList" :key="item.Id">
                        <view class="meal_top">
                            <view class="meal_name">{{ item.VName }}</view>
                            <view class="buy_btn" @click="toBuy(item)">购买</view>
                        </view>
                        <view class="item_price">
                            <view class="red_price">
                                <view>￥</view>
                                <view class="big_price">{{ item.SalePrice }}</view>
                            </view>
                            <view class="original_price">原价：￥{{ item.Price }}</view>
                            <view class="now_price">打后折：￥{{ item.SalePrice }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- <PopWindow /> -->
        <u-picker :show="firstshow" :columns="typeFirstList" keyName="KsbClassName" @confirm="confirmFirstOption"
            @cancel="hideOption('firstshow')"></u-picker>
        <u-picker :show="secondshow" :columns="typeSecondList" :keyName="isChild ? 'KsbClassName' : 'CName'"
            @confirm="confirmSecondOption" @cancel="hideOption('secondshow')"></u-picker>
        <u-picker :show="thirdshow" :columns="typeThirdList" keyName="CName" @confirm="confirmThirdOption"
            @cancel="hideOption('thirdshow')"></u-picker>
        <BuyPop ref="refBuyPop" popType="phone" @submit="submitOrder" />
    </view>
</template>
<script>
import PopWindow from '@/components/PopWindow'
import Navbar from '@/components/nav.vue'
import BuyPop from '@/components/BuyPop.vue'
export default {
    data () {
        return {
            isChild: true,
            title: '考试宝典',
            currentId: 0,
            typeFirstList: [],
            typeSecondList: [],
            typeThirdList: [],
            firstshow: false,
            secondshow: false,
            thirdshow: false,
            currentFirstSelect: {},
            currentSecondSelect: {},
            currentThirdSelect: {},
            renderList: [],
            buyData: {},
        }
    },
    components: {
        PopWindow, Navbar, BuyPop
    },
    created () {
        this.getFirstTypeList()
        // this.getRenderData();
    },
    methods: {
        // 切换一级分类
        changeTab (item) {
            this.currentId = item.id
        },
        // 获取一级科目
        async getFirstTypeList () {
            const res = await this.$http.get('treasure/category')
            this.typeFirstList = [res.Data]
        },
        // 选择科目
        showOption (pickerName) {
            if (pickerName === 'secondshow') {
                if (!this.currentFirstSelect.KsbClassName) {
                    return uni.showToast({ title: "请选择一级科目", icon: 'none' })
                }
            }
            if (pickerName === 'thirdshow') {
                if (!this.currentSecondSelect.KsbClassName) {
                    return uni.showToast({ title: "请选择二级科目", icon: 'none' })
                }
            }
            this[pickerName] = true
        },
        hideOption (pickerName) {
            this[pickerName] = false
        },
        //选择一级类目
        confirmFirstOption (data) {
            this.firstshow = false
            if (data.value[0].KsbClassName !== this.currentFirstSelect.KsbClassName) {
                this.currentFirstSelect = data.value[0]
                this.currentSecondSelect = {}
                this.currentThirdSelect = {}
                this.getSecondTypeList()
            }
        },
        //选择二级类目
        async confirmSecondOption (data) {
            this.currentSecondSelect = data.value[0];

            //有下一级
            if (this.isChild) {
                const res = await this.$http.get(`treasure/subjects/${this.currentSecondSelect.Id}`)
                this.typeThirdList = [res.Data.Subjects];
                //没有下一级
            } else {
                this.getRenderData();
            }
            this.hideOption('secondshow');
            console.log(this.typeThirdList, 'this.typeThirdList----');
        },
        //选择三级类目
        confirmThirdOption (data) {
            console.log("🚀 ~ confirmThirdOption ~ data:", data)
            this.currentThirdSelect = data.value[0]
            this.hideOption('thirdshow');
            this.getRenderData();
        },
        // 获取二级科目
        async getSecondTypeList () {
            const res = await this.$http.get(`treasure/subjects/${this.currentFirstSelect.Id}`)
            this.isChild = !!res.Data.Childs
            this.typeSecondList = [res.Data.Childs || res.Data.Subjects];
            console.log(this.typeSecondList, 'typeSecondList---');
        },
        //获取列表
        async getRenderData () {
            uni.showLoading({ title: "加载中" });
            const appId = !this.isChild ? this.currentSecondSelect.AppID : this.currentThirdSelect.AppID
            const res = await this.$http.get(`treasure/meal/${appId}`)
            this.renderList = res.Data;
            uni.hideLoading()
        },
        // 创建订单
        async toBuy (data) {
            this.$refs.refBuyPop.openDialog();
            this.buyData = data;
        },
        async submitOrder (data) {
            const res = await this.$http.post('treasure/order', {
                "mealId": this.buyData.Id,
                "phone": data.phoneValue
            })
            if (res.Code == 200) {
                this.orderId = res.Data.Id
                this.wxBuy(this.buyData.SalePrice);
            } else {
                uni.showToast({ title: res.Msg, icon: "none" });
            }

        },
        async wxBuy (total) {
            let that = this;
            // 预付款
            let obj = {
                openId: uni.getStorageSync('openid'),
                total_fee: total,
                orderId: this.orderId
            }
            const res = await this.$http.get('pay/prepay', obj)
            let resData = JSON.parse(res.Data.Data)
            wx.requestPayment({
                timeStamp: resData.timeStamp,
                nonceStr: resData.nonceStr,
                signType: resData.signType,
                paySign: resData.paySign,
                package: resData.package,
                success () {
                    uni.showToast({ title: `购买成功` })
                    let pages = getCurrentPages();
                    let prevPage = pages[pages.length - 2]; //上一个页面
                    prevPage.$vm.setTabs(2)
                    uni.navigateBack()
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.wrap {
    width: 100%;
    height: 100vh;
    background-color: #79829A;
    // background-image: url('../../../static/img/bg2.png');
    background-size: 750rpx 450rpx;
    background-repeat: no-repeat;

    .searchbox {
        padding: 32rpx 36rpx;
        box-sizing: border-box;

        /deep/.placeholderStyle {
            font-size: 28rpx;
            color: #ffffff !important;
        }
    }

    .content {
        height: calc(100vh - 212rpx);
        background: #FFFFFF;
        border-radius: 34rpx 34rpx 0 0;

        .select-box {
            display: flex;
            align-items: center;
            padding: 38rpx 28rpx;
            box-sizing: border-box;

            .choose-text {
                width: 48rpx;
                font-family: PingFang SC;
                font-size: 24rpx;
                color: #000000;
                flex-shrink: 0;
            }

            .select-option {
                flex: 1;
                margin-left: 12rpx;
                background: #F5F5F5;
                border-radius: 12rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20rpx;
                box-sizing: border-box;
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 26rpx;
                color: #000000;

                view {
                    overflow: hidden;
                    word-wrap: break-word;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }

            }

            .select-option.disabled {
                color: #999;
            }
        }

        .meal_list {
            min-height: 330rpx;
            background: linear-gradient(180deg, #DFEDFD 0%, #FFFFFF 100%);
            border-radius: 32rpx 32rpx 0 0;
            padding: 26rpx 28rpx;
            box-sizing: border-box;

            .list_title {
                display: flex;
                align-items: center;

                .list_icon {
                    width: 34rpx;
                    height: 34rpx;
                }

                text {
                    display: inline-block;
                    margin-left: 18rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 36rpx;
                    color: #000000;
                }
            }

            .list {
                margin-top: 50rpx;

                .item_meal {
                    margin-bottom: 84rpx;

                    .meal_top {
                        display: flex;
                        justify-content: space-between;

                        .meal_name {
                            height: 44rpx;
                            font-family: PingFang SC;
                            font-weight: bold;
                            font-size: 32rpx;
                            color: #000000;
                            line-height: 44rpx;
                        }

                        .buy_btn {
                            width: 108rpx;
                            height: 56rpx;
                            background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
                            border-radius: 10rpx;
                            font-family: PingFang SC;
                            font-weight: bold;
                            font-size: 28rpx;
                            color: #FFFFFF;
                            line-height: 56rpx;
                            text-align: center;
                        }
                    }

                    .item_price {
                        margin-top: 26rpx;
                        height: 58rpx;
                        display: flex;
                        align-items: flex-end;

                        .red_price {
                            display: flex;
                            align-items: flex-end;
                            font-family: DIN;
                            font-weight: bold;
                            font-size: 28rpx;
                            color: #FF0000;

                            .big_price {
                                font-size: 48rpx;
                                line-height: 1;
                            }
                        }

                        .original_price,
                        .now_price {
                            font-family: PingFang SC;
                            font-weight: bold;
                            font-size: 28rpx;
                            color: #999999;
                        }

                        .original_price {
                            margin-left: 34rpx;
                            margin-right: 48rpx;
                        }
                    }
                }
            }

            .no_data {
                text-align: center;
                font-size: 38rpx;
                padding-top: 38rpx;
                font-weight: 500;
            }
        }
    }
}
</style>